<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/7/2
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>工作日志</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
    <div id="root">
        <Collapse value="1">
            <Panel name="1">
                条件查询
                <p slot="content">
                    <i-form :label-width="60" inline>

                        <Form-Item label="操作人">
                            <i-Select v-model="journalVo.staffId" clearable  style="width: 120px;">
                                <i-Option v-for="item in staffList" :value="item.id" :key="item.id">{{ item.staffName }}</i-Option>
                            </i-Select>
                        </Form-Item>
                        <Form-Item label="操作模块">
                            <i-Select v-model="journalVo.menuId" clearable  style="width: 120px;">
                                <i-Option v-for="item in menuList" :value="item.id" :key="item.id">{{ item.name }}</i-Option>
                            </i-Select>
                        </Form-Item>
                        <Form-Item label="提交时间">
                            <Date-Picker type="datetime" placeholder="起始时间" style="width: 200px" v-model="journalVo.stime"></Date-Picker>
                            <Date-Picker type="datetime" placeholder="截止时间" style="width: 200px" v-model="journalVo.etime"></Date-Picker>
                        </Form-Item>
                        <i-button type="primary" @click="pageNo=1;getList();">搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>

        <Card style="margin: 20px 0" >

            <Icon type="ios-film-outline"></Icon>
            数据列表
        </Card>

        <i-table :columns="columns" :data="data"  border stripe height="350">
            <template slot-scope="{row,index}" slot="staff">
                {{row.staff.staffName}}
            </template>
            <template slot-scope="{row,index}" slot="menu">
                {{row.menu.name}}
            </template>
        </i-table>
        <Page :total="total1"
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {title:"操作人",slot:"staff"},
                {title:"操作时间",key:"upDate"},
                {title:"操作模块",slot:"menu"},
                {title:"操作内容",key:"upContent"},

            ],
            data:[],
            total1:{},
            pageSize:5,
            pageNo:1,
            journalVo:{},
            staffList:[],
            menuList:[],
        },
        mounted(){
            this.getList();
            this.getStaffList();
            this.getMenuList();
        },
        methods: {
            getList(){
                let params=Qs.stringify(this.journalVo,{serializeDate:(date)=>{
                        return moment(date).format("YYYY-MM-DD HH:mm:ss");
                    }})
                axios.post(`/jur/journal/list/${this.pageSize}/${this.pageNo}`,Qs.parse(params)).then(
                    ({data})=>{
                        this.data = data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getStaffList(){
                axios.post("/jur/staff/staffList").then(
                    ({data})=>{
                        this.staffList = data.result;
                    }
                )
            },
            getMenuList(){
                axios.post("/jur/journal/menuList").then(
                    ({data})=>{
                        this.menuList = data.result;
                    }
                )
            },
        }
    })
</script>
</html>
